<template>
  <a-drawer
    title="房价历史"
    placement="right"
    width="800"
    @close="onClosable"
    :visible="visible"
    destroyOnClose
    :bodyStyle="{
      padding: '10px',
      height: 'calc(100% - 70px)',
    }"
  >
    <section class="table">
      <a-table
        :loading="loading"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        rowKey="id"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'action'">
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="record.status"
              :checkedValue="1"
              :unCheckedValue="0"
              @change="(checked) => onStatusTrigger(checked, record)"
            />
          </template>
        </template>
      </a-table>
    </section>
  </a-drawer>
</template>

<script>
import { reactive, toRefs, defineComponent, watch } from "vue";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "PriceHistory",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
      dataSource: [],
      columns: [
        {
          title: "日期",
          dataIndex: "created_day",
        },
        {
          title: "房价（m²/天）",
          dataIndex: "square_day",
        },
        {
          title: "房价（m²/月）",
          dataIndex: "square_month",
        },
        {
          title: "房价（天）",
          dataIndex: "day",
        },
        {
          title: "房价（月）",
          dataIndex: "month",
        },
        {
          title: "房价（年）",
          dataIndex: "year",
        },
        {
          title: "状态",
          dataIndex: "id",
          key: "action",
        },
      ],
      checked: true,
      loading: false,
    });

    const onClosable = () => {
      context.emit("clear");
    };

    const getRoomPriceList = () => {
      let params = {
        room_id: props.id,
      };
      state.loading = true;
      request
        .get("/village", "/project/room_price/list", params)
        .then((res) => {
          state.dataSource = res.list;
          state.loading = false;
        });
    };

    const onStatusTrigger = (checked, record) => {
      request
        .put("/village", "/project/room_price", {
          id: record.id,
          room_id: props.id,
          status: checked,
        })
        .then((res) => {
          message.success("操作成功");
          getRoomPriceList();
        });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getRoomPriceList();
        }
      }
    );

    return {
      ...toRefs(state),
      onClosable,
      onStatusTrigger,
    };
  },
});
</script>

<style lang="less" scoped>
.table {
  height: 100%;
  overflow: auto;
}
</style>
